<template>
    <div class="tablesty">
     
 

   <el-table
    :data="users.slice((currpage-1)*pagesize,currpage*pagesize)"
    border
    style="width:100%"
    empty-text
   
    >
   <el-table-column
   align='center'
     label="头像"
    prop="headImage">
        <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="url+scope.row.headImage" alt="" style="width: 150px;height: 150px">
              <img slot="reference" :src="url+scope.row.headImage"  style="width: 30px;height: 30px">
            </el-popover>
        </template>
      </el-table-column>

      <el-table-column
   align='center'
      prop="username"
      label="昵称"
     >
    </el-table-column>  
    <el-table-column
    show-overflow-tooltip
    align='center'
      prop="name"
      label="姓名"
    >
  </el-table-column>  

      <el-table-column
       align='center'
      prop="age"
      label="年纪"
     >
    </el-table-column>
    <el-table-column
     align='center'
      prop="phone"
      label="电话"
    >
    </el-table-column>
  </el-table>
      

    <div class="block">
   
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="users.length">
    </el-pagination>
  </div>
    </div>
</template>

<script>
import request from '../../utils/request';
    export default {
        data(){
            return {
              url:'/img/images/',
                pagesize:5,
                currpage:1,
                currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 1,
             size:0,
                users:[],
                imageUrl:'',
                imagearr:[],
              
            }
        },
         methods: {
     
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currpage=val
      }
    },
        mounted(){
request.get(`/users?size=${parseInt(this.size)}`).then((res)=>{
 
  this.users=res.pagedata}

  )
        }
    }
</script>

<style scoped>
.block{
    margin-top: 20px;
}
.tablesty{
  padding: 50px;
}
</style>